<template>
  <div class="app-container resource">

    <el-form ref="postForm" :model="postForm" :rules="rules" style="margin-left: 50px">
      <el-card class="box-card ">
      <h5 style="margin-left: 50px">帮助菜单基本属性（<span style="color: red">*</span>  为必填项）</h5>
      <el-form-item label="级别选择" prop="resource" style="margin-left: 50px">
        <el-radio-group v-model="postForm.resource">
          <el-radio label="一级菜单" />
          <el-radio label="二级菜单" />
        </el-radio-group>
      </el-form-item>
      <el-form-item label="菜单名称" prop="name" style="margin-left: 50px">
        <el-input v-model="postForm.menu" style="width: 200px;" />
      </el-form-item>
      </el-card>
      <template>
        <el-card class="box-card ">
        <el-form-item prop="content" class="tinymce">
          <h3>帮助内容:</h3>
          <Tinymce ref="editor" v-model="postForm.content" :height="400" />
        </el-form-item>
        </el-card>
      </template>
      <el-card class="box-card ">
      <el-form-item label="菜单名称" style="margin-left: 50px">
        <el-input v-model="postForm.desc" style="width: 240px;margin-left: 50px" placeholder="倒序" />
      </el-form-item>
      <el-form-item label="菜单名称" style="margin-left: 50px">
        <el-input v-model="postForm.descs" style="width: 240px;margin-left: 50px" placeholder="(选填)外链为空则显示帮助内容，不为空则跳转到外链! " />
      </el-form-item>
      <div style="margin: 0 auto;width:60px">
        <el-button type="primary"  @click="postonsubmit">提交</el-button>
      </div>
      </el-card>
    </el-form>

  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { validURL } from '@/utils/validate'
import Upload from '@/components/Upload/SingleImage3'
const defaultForm = {
  status: 'draft',
  title: '', // 文章题目
  desc: '', // 联系人
  content: '', // 文章内容
  content_short: '', // 文章摘要
  source_uri: '', // 文章外链
  image_uri: '', // 文章图片
  display_time: undefined, // 前台展示时间
  id: undefined,
  platforms: ['a-platform'],
  comment_disabled: false,
  importance: 0
}
export default {
  name: 'Helpcenter',
  // eslint-disable-next-line vue/no-unused-components
  components: { Tinymce, Upload },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: rule.field + '为必传项',
          type: 'error'
        })
        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
    }
    const validateSourceUri = (rule, value, callback) => {
      if (value) {
        if (validURL(value)) {
          callback()
        } else {
          this.$message({
            message: '外链url填写不正确',
            type: 'error'
          })
          callback(new Error('外链url填写不正确'))
        }
      } else {
        callback()
      }
    }
    return {
      postForm: Object.assign({}, defaultForm),
      loading: false,
      userListOptions: [],
      rules: {
        image_uri: [{ validator: validateRequire }],
        title: [{ validator: validateRequire }],
        content: [{ validator: validateRequire }],
        source_uri: [{ validator: validateSourceUri, trigger: 'blur' }],
        name: [
          { required: true, message: '菜单名称', trigger: 'blur' }
        ],
        resource: [
          { required: true, message: '请选择菜单级别', trigger: 'change' }
        ],
        desc: [],
        descs: []
      },
      methods:  {
        postonsubmit() {

        }
      }
    }
  }
}
</script>
<style>
.manage{
  display: flex;
  justify-content:space-around;
  align-content: center;
  flex-wrap: wrap;
}
.tinymce{
  width: 60%;
  margin: 30px auto;
}
.resource{
  margin-bottom: 30px;
}
</style>
